<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自我介绍</title>
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body {
            margin: 0;
            padding: 30px; /* 页面内边距 */
        }
        
        .box {
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center;    /* 垂直居中 */
            height: 300px;         /* 容器高度 */
            border: 1px solid #ccc; /* 边框样式 */
            margin-bottom: 20px;
        }
        .box div {
            width: 450px;
        }

        img {
            width: 100%;
        }
        
        /* Element UI组件样式 */
        .el-container {
            margin-bottom: 20px;
        }
        .el-card {
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- Element UI布局容器 -->
        <el-container>
            <el-main>
                <!-- 图片展示卡片 -->
                <el-card shadow="hover">
                    <div class="box">
                        <div><img :src="one" alt=""></div>
                        <div><img :src="two" alt=""></div>
                        <div><img :src="three" alt=""></div>
                        <div><img :src="four" alt=""></div>
                    </div>
                </el-card>
                
                <!-- 自我介绍卡片 -->
                <el-card shadow="hover">
                    <h1>hello,大家好呀</h1>
                    <el-divider></el-divider>
                    <h2>欢迎来了解我哦！</h2>
                    <p>我叫李薇薇，来自湖南岳阳，现在是湘潭大学24级通信工程四班的学生。作为一个INFPer，我性格里既有细腻敏感的一面，也有天马行空的幻想力。初次见面时可能会显得有点高冷（其实是慢热+社恐发作），但熟悉后就会发现我其实是个话多又爱笑的人，甚至偶尔会有点沙雕，朋友们常说我有"反差萌"。</p >
                </el-card>
                
                <!-- 个人标签卡片 -->
                <el-card shadow="hover">
                    <p>关于我的小标签</p >
                    <el-divider></el-divider>
                    <el-tag type="success">艺术型宅女</el-tag>：超爱画画，尤其是板绘和手绘，喜欢用色彩和线条表达情绪，最近在尝试Procreate，欢迎同好交流！<br><br>  
                    <el-tag type="info">音乐依赖症患者</el-tag>：网易云年度报告常驻选手，歌单从民谣到电子摇滚乱炖，雨天必听《水星记》，开心时循环《晴天》。<br><br>  
                    <el-tag type="warning">非典型工科女</el-tag>：虽然学通信工程，但数学课上可能偷偷在草稿本画小人（别学我），梦想是以后能设计出科技感与艺术感结合的产品。<br><br>  
                    <el-tag type="danger">运动爱好者</el-tag>：羽毛球能打两小时不喊累（但讨厌跑步），游戏里从《猛兽世界》到《王者荣耀》都涉猎，不过技术很菜，求大佬带飞！<br>  
                </el-card>
                
                <!-- 其他信息卡片 -->
                <el-card shadow="hover">
                    <p>其他碎碎念：</p >
                    <el-divider></el-divider>
                    <el-collapse>
                        <el-collapse-item title="点击查看详情">
                            身高167cm，体重55kg（冬天会偷偷胖三斤），喜欢毛绒玩具和一切治愈系小物件，书包上总挂着卡皮巴拉挂件。对心理学和神秘学感兴趣，偶尔会研究星座和MBTI（虽然知道不准但乐此不疲）。最近在尝试写日记，目标是成为"浪漫又理性的生活观察者"。
                        </el-collapse-item>
                    </el-collapse>
                </el-card>
                
                <!-- 交友宣言卡片 -->
                <el-card shadow="hover">
                    <p>交友宣言：</p >
                    <el-divider></el-divider>
                    <el-alert 
                        title="如果你也喜欢在夕阳下发呆、在深夜单曲循环一首歌、或者愿意陪我讨论'为什么作业永远做不完'这种哲学问题——欢迎来戳我！(*╹▽╹*)"
                        type="success"
                        :closable="false">
                    </el-alert>
                </el-card>
            </el-main>
        </el-container>
    </div>
    
    <!-- 引入Vue和Element UI库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
       const app = new Vue({
            el:'#app',
            data:{
                one:'zhaopian1.jpg',
                two:'zhaopian2.jpg',
                three:'zhaopian3.jpg',
                four:'zhaopian4.jpg'
            }
        })
    </script>
</body>

</html>